import React from 'react';
import {Tree} from 'antd';
import {withRouter} from 'react-router-dom';
import Request from '@ajax/index.jsx';
import Tools from '@untils/tools.jsx';
import {APIS_NAV_TREE} from '@apis/index.js';

import './scss/index.scss';

const _req = new Request();
const DirectoryTree = Tree.DirectoryTree;
const TreeNode = Tree.TreeNode;

class NavTree extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            treeList: []
        };
        this.setCallback = Tools.setCallback.bind(this);
    }

    componentDidMount() {
        this.requestTreeList()
    }

    // 请求左侧树列表
    requestTreeList() {
        _req.axios(APIS_NAV_TREE.TREELIST(0)).then(data => {
            let treeList = data.subs || [];
            let {onExpand = null} = this.props;
            let expandedKeys = Tools.findFirstIds(treeList, 'subs');

            expandedKeys = expandedKeys.map(item => item + "");
            this.onSelect(expandedKeys.slice(expandedKeys.length - 1));

            this.setCallback({treeList})

            if (!onExpand) {
                return false;
            }
            this.onExpand(expandedKeys);
        });
    }

    onSelect = (selectedKeys) => {
        this.props.onSelect(selectedKeys)
    }

    onExpand = (expandedKeys) => {
        this.props.onExpand({expandedKeys});
    }

    treeNode() {
        let {onExpand = null, expandedKeys = [], selectedKeys = [], defaultExpandAll = true} = this.props;
        let {treeList} = this.state;
        let trees = null;
        let props = {};

        // onExpand 受限制
        if (onExpand) {
            props.expandedKeys = expandedKeys;
            props.selectedKeys = selectedKeys;
            props.onExpand = this.onExpand;
        } else {
            // 不受限制 默认全部展开
            props.defaultExpandAll = defaultExpandAll;
        }

        if (treeList && treeList.length)
            trees = (
                <DirectoryTree
                    onSelect={this.onSelect}
                    {...props}
                >{this.renderTree(treeList)}</DirectoryTree>
            );

        return trees;
    }

    renderTree(treeList) {
        return treeList.map(item => {
            let hasChildren = item.subs && item.subs.length > 0;
            let currentNode = null;
            if (hasChildren) {
                let nextTreeList = item.subs;
                currentNode = <TreeNode selectable={false} title={item.name}
                                        key={item.id}>{this.renderTree(nextTreeList)}</TreeNode>;
            } else {
                currentNode = <TreeNode title={item.name} key={item.id} isLeaf/>;
            }

            return currentNode;
        })
    }

    render() {
        let {navTitle} = this.props;
        return (
            <div className="left-nav-content">
                <span className="arrow" id="arrow"></span>
                <div className="nav-content">
                    <div className="nav-tree">
                        <span className="nav-title">{navTitle}</span>
                        <div className="tree-wrap">
                            {this.treeNode()}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(NavTree);